<template>
    <div class="jianzhan-content">
        <Crumb name="Vendor"> </Crumb>
        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >Add New Vendor
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Vendor Name"
                        prefix-icon="el-icon-search"
                > </el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="vendorList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="No"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="englishName"
                            label="Vendor Name"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="chineseName"
                            label="Vendor Name"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="settlementType"
                            label="Business"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="City"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="contact"
                            label="Contact Person"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="Phone Number"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">Edit
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="console.log(scope.$index, scope.row)">Delete
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Visiting Abstract"
                        :visible.sync="dialogVisible"
                        width="80%"
                        >

                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                        <!--<el-form-item label="No">-->
                            <!--<el-input v-model="ruleForm.no"></el-input>-->
                        <!--</el-form-item>-->
                        <el-form-item label="Vendor Name" prop="vendorName">
                            <el-input v-model="ruleForm.vendorName"></el-input>
                        </el-form-item>
                        <el-form-item label="Business" prop="business">
                            <el-input v-model="ruleForm.business"></el-input>
                        </el-form-item>
                        <el-form-item label="City">
                            <el-input v-model="ruleForm.city"></el-input>
                        </el-form-item>
                        <el-form-item label="Address" prop="address">
                            <el-input v-model="ruleForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="Contact">
                            <el-input v-model="ruleForm.contact"></el-input>
                        </el-form-item>
                        <el-form-item label="Phone Number" >
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="Bank" >
                            <el-input v-model="ruleForm.bank"></el-input>
                        </el-form-item>
                        <el-form-item label="Bank Account" >
                            <el-input v-model="ruleForm.bankAccount"></el-input>
                        </el-form-item>
                        <el-form-item label="Note">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 8}"
                                    v-model="ruleForm.note"></el-input>
                        </el-form-item>
                    </el-form>


                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {ERROR_OK} from "../../util/config";
    import {getVendorList} from "../../api";

    export default {
        name: "vendor",
        data() {
            return {
                vendorList:[

                ],
                ruleForm: {
                    no: '',
                    vendorName: '',
                    business: '',
                    address: '',
                    city:'',
                    contact:'',
                    phone:'',
                    note:'',
                    bank:'',
                    bankAccount:''
                },
                rules: {
                    title: [
                        { required: true, message: 'Title is required', trigger: 'blur' },
                    ],
                    vendorName: [
                        { required: true, message: 'Name is required', trigger: 'blur' }
                    ],
                    business: [
                        {  required: true, message: 'Business is required', trigger: 'blur' }
                    ],
                    address: [
                        {  required: true, message: 'Address is required', trigger: 'blur' }
                    ],
                },
                key: '',
                total: 0,
                dialogVisible:false
            }
        },
        created(){
            this._getVendor();
        },
        methods: {
            async _getVendor(){
                const {status,data} = await getVendorList();
                if (status === ERROR_OK) {
                    this.vendorList = data;
                    this.total = data.length
                }
            },
            submitForm(){
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (this.id) {
                            alert('m')
                        } else {
                            alert('a')
                        }
                    } else {
                        return false;
                    }
                });
            },
            clear(){
                this.ruleForm.vendorName = '';
                this.ruleForm.no = '';
                this.ruleForm.customerName = '';
                this.ruleForm.business = '';
                this.ruleForm.address = '';
                this.ruleForm.city = '';
                this.ruleForm.contact = '';
                this.ruleForm.phone = '';
                this.ruleForm.note = '';
            },
            openAdd(){
                this.clear();
                this.dialogVisible = true
            },
            openEdit(r){
                this.ruleForm.no = r.no;
                this.ruleForm.vendorName = r.vendorName;
                this.ruleForm.business = r.business;
                this.ruleForm.address = r.address;
                this.ruleForm.city = r.city;
                this.ruleForm.contact = r.contact;
                this.ruleForm.phone = r.phone;
                this.ruleForm.note = r.note;

                this.id = r.id;
                this.dialogVisible = true

            },
            changePage(page) {
                alert(page)
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
</style>